<template>
  <div class="box">
        <header class="header">
            <div class="a1">
                <img src="/static/imgs_s10/S_10order1.08.png" alt="">
                <div></div>
                <span><input type="text" v-model="pName"></span>
            </div>
            <div class="a2">
                <span @click="search">搜索</span>
            </div>
        </header>
        
        <section>
            <ul class="ul1">
                <li @click="change(null)">全部</li>
                <li v-for="(sort,index) in sort" :key="index" @click="change(sort.id)">{{sort.name}}</li>
            </ul>
            <ul class="ul2">
                <scroll-view scroll-y="true" style="height: 700px;" scroll-with-animation="true">
                <li class="li2" v-for="(product,index) in productList" :key="index">
                    <img :src="product.pic" alt="">
                    <div class="b1">
                        <p class="p1"><span v-if="product.promotion_price==null || product.promotion_price==0">特价</span></p>
                        <p class="p2">{{product.name}}</p>
                        <p class="p3">{{product.sale}}</p>
                        <p class="p4" v-if="product.promotion_price!=null || product.promotion_price!=0">原价:¥{{product.price}}/份</p>
                        <p class="p5">¥{{product.promotion_price==0||product.promotion_price==null?product.price:product.promotion_price}}/份</p>
                    </div>
                    <div class="b2">
                        <img class="img1" v-if="product.count!=0"  @click="countjian(index)" src="/static/imgs_s10/S_10order1.07.png" alt="">
                        <span v-if="product.count!=0" @click="countjian(index)" class="span1"></span>
                        <span class="span2">{{product.count}}</span>
                        <img class="img2" @click="countjia(index)" src="/static/imgs_s10/S_10order1.09.png" alt="">
                        <span class="span3" @click="countjia(index)"></span>
                    </div>
                </li>
                <li>
                    <div style="height:50px"></div>
                </li>
                </scroll-view>
            </ul>
        </section>
        
        <footer v-show="!how">
            <img class="footer-imgs1" id="imgs" src="/static/imgs_s10/S_10order1.06.png" alt="" @click="shopCartT">
            <span v-if="num>0" class="span-1">{{num}}</span>
            <div class="div1">
                <span class="span1">合计</span>
                <span class="span2">￥{{all}}</span>
            </div>
            <div class="div2" @click="submit">选好了</div>
        </footer>



        <!-- 购物车页面 -->
        <!-- 蒙版 -->
    <div v-show="how">
      <div class="mask" id="mask" @click="shopCartF"></div>
        <div class="cart" id="cart" >
            <img class="imgs-1" id="imgs-1" src="/static/imgs_s10/S_10order1.06.png" alt="" @click="shopCartF">
            <span class="span-1">4</span>
            <span class="span-2"></span>
            <div class="c">
                <div class="c1">
                    <img class="c1-imgs1" @click="checkAll" 
                    :src="choose ? '/static/imgs_s10/S_10order2.03.png' : '/static/imgs_s10/S_10order2.02.png'" alt="" />
                    <span class="c1-span1">全选</span>
                    <span class="c1-span2">（已选{{num}}种）</span>
                    <img class="c1-imgs2" src="/static/imgs_s10/S_10order2.01.png" alt="">
                    <span class="c1-span3" @click="del">清空购物车</span>
                </div>
                <scroll-view scroll-y="true" style="height: 400px;" scroll-with-animation="true">
                <div class="c2" v-for="(cart,index) in cart" :key="index">
                    <div>
                        <img class="c2-imgs1" @click="check(index)" 
                        :src="cart.checked ? '/static/imgs_s10/S_10order2.03.png':'/static/imgs_s10/S_10order2.02.png' " alt="" />
                        <img class="c2-imgs2" src="/static/imgs_s10/S_10order1.01.png" alt="">
                        <div class="c2-div1">
                            <span class="c2-span1">{{cart.name}}</span><br>
                            <span class="c2-span2">¥{{cart.promotion_price==0||cart.promotion_price==null?cart.price:cart.promotion_price}}</span>
                        </div>
                        <div class="c2-div2">
                            <span class="c2-div2-span1"></span>
                            <span class="c2-div2-span2" @click="cartjian(index)"></span>
                            <span class="c2-div2-span3">{{cart.count}}</span>
                            <span class="c2-div2-span4" @click="cartjia(index)"></span>
                            <span class="c2-div2-span5"></span>
                            <span class="c2-div2-span6"></span>
                        </div>
                    </div>

                </div>
                </scroll-view>
            </div>
            <div class="d">
                <span class="d-span1">合计：</span>
                <span class="d-span2">￥{{all}}</span>
                <span class="d-span3" @click="submit">选好了</span>
            </div>
        </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      sort:[],//商品分类
      productList:[],//全部商品
      count:0,//所选商品数量
      all:0,//商品总价
      pName:'',//搜素关键字
      list:[],//备份:全部商品,
      how:false,
      num:0,
      choose:true,
      cart:[],
      order:[]
        }
    },

  methods: {
   /*change(id){//左侧分类获取商品数据
       wx.request({
         url: 'http://localhost:7004/change?id='+id, //开发者服务器接口地址",
         data: 'data', //请求的参数",
         method: 'GET',
         dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
         success: res => {
             this.productList=res.data;
         },
         fail: () => {},
         complete: () => {}
       });
   },*/
    change(id){//左侧分类获取商品数据
        var list = [];
        if(id==null){
            this.productList=this.list;
            }else if(id!=null){
            for(var i=0;i<this.list.length;i++){
                if(this.list[i].product_category_id==id){
                    list.push(this.list[i])
                }
        }
        this.productList=list;
        }
        
    },
   countjia(index){//加非购物车
       var count = this.productList[index].count++;
       if(this.productList[index].count==1){
               this.num+=1;
               this.cart.push(this.productList[index])
           }
        var money=0
                 for(var i=0;i<this.list.length;i++){
                     if(this.productList[index].id==this.list[i].id){
                         this.list[i].count=this.productList[index].count;
                    }                 
                
             }

        for(var i=0;i<this.list.length;i++){//商品的类数
           money+=this.list[i].count*this.list[i].promotion_price;
       }
       this.all=money;
   },
   countjian(index){//减 非购物车
       var count = this.productList[index].count--;
       if(this.productList[index].count==0){
           this.num-=1;
           this.cart.splice(index,i)
           /*for(var i=0;i<this.cart.length;i++){
               if(this.productList[index].id=this.cart[i].id&&this.cart[i].count<1){
                   this.cart.splice(i,1);
               }
           }*/
       }
       var money = 0
       
                 for(var i=0;i<this.list.length;i++){
                     if(this.productList[index].id==this.list[i].id){
                         this.list[i].count=this.productList[index].count;
                    }                 
                
             }

        for(var i=0;i<this.list.length;i++){
           money+=this.list[i].count*this.list[i].promotion_price;
       }
       this.all=money;
   },
   cartjia(index){//购物车加
       this.cart[index].count++;
        
                 for(var i=0;i<this.productList.length;i++){
                     if(this.cart[index].id==this.productList[i].id){
                         this.productList[i].count=this.cart[index].count;
                    }                 
             }
        var money =0
        for(var i=0;i<this.productList.length;i++){//商品的类数
           money+=this.productList[i].count*this.productList[i].promotion_price;
       }
       this.all=money;
   },
   cartjian(index){//购物车 减
       this.cart[index].count--;
       
       
        for(var i=0;i<this.productList.length;i++){
             if(this.cart[index].id==this.productList[i].id){
                 this.productList[i].count=this.cart[index].count;
             }                 
        }
        
        if(this.cart[index].count==0){
           this.num-=1;
           this.cart.splice(index,1)
       }

        var money = 0
        for(var i=0;i<this.productList.length;i++){
           money+=this.productList[i].count*this.productList[i].promotion_price;
       }
       this.all=money;
   },
   check(index){//选择
       if(this.cart[index].checked==false){
           this.cart[index].checked=true;
            
       }else{
           this.cart[index].checked=false;
           
       }
   },
   search(){//模糊查询
       var pro= [];
       this.productList=this.list;
       wx.request({
         url: 'http://localhost:7004/change?name='+this.pName, //开发者服务器接口地址",
         data: 'data', //请求的参数",
         method: 'GET',
         dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
         success: res => {
             if(this.pName==''|this.pName==null){
                 this.productList=this.list;
             }
            for(var o=0;o<res.data.length;o++){
                 for(var i=0;i<this.productList.length;i++){
                     if(res.data[o].id==this.productList[i].id){
                         res.data[o].count=this.productList[i].count;
                         this.list[i].count=this.productList[i].count;
                         pro.push(res.data[o]);  
                    }                 
                }
             }
            this.productList=res.data;
         },
         fail: () => {},
         complete: () => {}
       });
   },
   shopCartT(){//购物车显示
        var cartList=[];
        for(var i=0;i<this.cart.length;i++){
            if(this.cart[i].count>0){
                cartList.push(this.cart[i]);
            }
        }
        this.cart=cartList;
       this.how=true;
   },
   shopCartF(){//购物车隐藏
       this.how=false;
   },
   del(){//清空购物车
       for(var i=0;i<this.productList.length;i++){
        this.productList[i].count=0;
       }
       this.all=0;
       this.num=0;
       this.cart.splice(0,this.cart.length);
   },
   checkAll(){
       if(this.choose==false){
           this.choose=true;
           for(var i=0;i<this.cart.length;i++){
               this.cart[i].checked=true;
           }
       }else{
           this.choose=false
           for(var i=0;i<this.cart.length;i++){
               this.cart[i].checked=false;
           }
       }
   },
   submit(){
       this.order=[];
                for(var i=0;i<this.cart.length;i++){
                    if(this.cart[i].checked&&this.cart[i].count>0){
                        this.order.push(this.cart[i]);
                    }
                }
       if(this.cart.length==0){
        wx.showToast({
            title: '请选择商品',
            icon: 'none',
            duration: 1500
            })
       }else{
           
                var cartList=JSON.stringify(this.order)
                wx.request({
                  url: 'http://localhost:7004/cart', //开发者服务器接口地址",
                  header:{'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
                  data: {'cart':cartList}, //请求的参数",
                  method: 'post',
                  dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
                  success: res => {
                      wx.navigateTo({ url: '/pages/s10_Takeaway03-1/main' });
                  },
                  fail: () => {},
                  complete: () => {}
                });
            }
       }
       
  },

  created () {
      //获取商品数据
    // let app = getApp()
    wx.request({
      url: 'http://localhost:7004/list', //开发者服务器接口地址",
      data: 'data', //请求的参数",
      method: 'GET',
      dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
      success: res => {
          if(res.statusCode==200){
              for(var i=0;i<res.data.list.length;i++){
                  res.data.list[i].count=this.count;
                  res.data.list[i].checked=true;
              }
          }
          this.sort = res.data.pro;
          this.productList = res.data.list;
          this.list = res.data.list;
      },
      fail: () => {},
      complete: () => {}
    });
  }
}
</script>

<style scoped>


        .box {
            width: 100%;
            height: 100%;
            position: relative;
            background: rgba(247, 247, 247, 1);
        }

        /* 顶部区块 */
        .header {
            position: absolute;
            left: 0;
            height: 0;
            display: flex;
            align-items: center;
            width: 375px;
            height: 48px;
            background: rgba(255, 255, 255, 1);
        }

        .header .a1 {
            margin-left: 17px;
            width: 299px;
            height: 33px;
            background: rgba(247, 247, 247, 1);
            border-radius: 17px;
            display: flex;
            align-items: center;
        }

        .header .a2 {
            margin-left: 15px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(0, 0, 0, 1);
        }

        .header .a1 img {
            margin-left: 12px;
            width: 12px;
            height: 12px;
        }

        .header .a1 div {
            margin-left: 13px;
            width: 2px;
            height: 13px;
            background: rgba(50, 177, 108, 1);
            border-radius: 1px;
        }

        .header .a1 span {
            margin-left: 4px;
            width: 97px;
            height: 12px;
            line-height: 12px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(158, 158, 158, 1);
        }

        /* 中间区块左部分 */
        section .ul1 {
            position: absolute;
            left: 0;
            top: 48px;
        }

        section .ul1 li {
            position: absolute;
            left: 14px;
            width: 88px;
            height: 12px;
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
        }

        .ul1 li:nth-child(1) {
            top: 22px;
        }

        .ul1 li:nth-child(2) {
            top: 72px;
        }

        .ul1 li:nth-child(3) {
            top: 122px;
        }

        .ul1 li:nth-child(4) {
            left: 0px;
            top: 160px;
            width: 88px;
            height: 39px;
            background: rgba(255, 255, 255, 1);
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
        }

        .ul1 li:nth-child(4) p {
            position: absolute;
            left: 0;
            top: 14px;
            width: 3px;
            height: 13px;
            background: rgba(50, 177, 108, 1);
        }

        .ul1 li:nth-child(4) span {
            position: absolute;
            left: 15px;
            top: 10px;
        }

        .ul1 li:nth-child(4) div {
            position: absolute;
            left: 55px;
            top: 4px;
            width: 17px;
            height: 17px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(241, 145, 73, 1);
            border-radius: 50%;
        }

        .ul1 li:nth-child(5) {
            top: 220px;
        }

        .ul1 li:nth-child(6) {
            top: 270px;
        }

        /* 中右 */
        section .ul2 {
            position: absolute;
            left: 79px;
            top: 48px;
            width: 296px;
            height: 595px;
            background: rgba(255, 255, 255, 1);
            display: flex;
            flex-direction: column;
        }

        section .ul2 li {
            display: flex;
            flex-direction: row;
            margin-top: 17px;
            width: 296px;
            height: 85px;
        }

        section .ul2 .li1 {
            width: 286px;
            height: 12px;
            margin-top: 14px;
            margin-left: 10px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 10px;
        }

        section .ul2 li img {
            margin-left: 10px;
            margin-right: 10px;
            width: 85px;
            height: 85px;
        }

        /* 图右 */
        section .ul2 li .p1 {
            width: 30px;
            height: 13px;
            background: rgba(228, 41, 56, 1);
            border-radius: 3px;
        }

        section .ul2 li .p1 span {
            margin-left: 3px;
            line-height: 13px;
            font-size: 9px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 10px;
        }

        section .ul2 li .p2 {
            width: 100px;
            height: 12px;
            font-size: 13px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
        }

        section .ul2 li .p3 {
            width: 40pxpx;
            height: 10px;
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
        }

        .p4 {
            width: 72px;
            height: 11px;
            font-size: 10px;
            font-weight: 400;
            text-decoration: line-through;
            color: rgba(163, 165, 168, 1);
        }

        .p4 {
            margin-top: 6px;
            width: 100px;
            height: 14px;
            font-size: 13px;
            font-weight: bold;
            color: rgba(232, 91, 77, 1);
        }

        .b1 .p2,
        .b3 .p2 {
            margin-top: 8px;
        }

        .b5 .p2,
        .b7 .p2,
        .b9 .p2 {
            margin-top: 5px;
        }

        .b1 .p3,
        .b3 .p3 {
            margin-top: 5px;
        }

        .b5 .p3,
        .b7 .p3,
        .b9 .p3 {

            margin-top: 11px;
        }

        .b1 .p5,
        .b3 .p5 {
            margin-top: 5px;
        }

        .b5 .p5,
        .b7 .p5,
        .b9 .p5 {
            margin-top: 28px;
        }

        .b2,
        .b4,
        .b6,
        .b8,
        .b10 {
            position: relative;
            margin-left: 20px;
            margin-top: 67px;
            width: 74px;
            height: 21px;
            display: flex;
            justify-content: space-between;
        }

        section .ul2 li .b2 .img1,
        section .ul2 li .b4 .img1,
        section .ul2 li .b6 .img1,
        section .ul2 li .b8 .img1,
        section .ul2 li .b10 .img1 {
            position: absolute;
            left: 0px;
            top: -5px;
            width: 21px;
            height: 21px;
            margin: 0;
            padding: 0;
        }

        .b2 .span3,
        .b4 .span3,
        .b6 .span3,
        .b8 .span3,
        .b10 .span3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 21px;
            height: 21px;
            background: rgba(50, 177, 108, 1);
            border-radius: 50%;
        }

        section .ul2 li .b2 .img2,
        section .ul2 li .b4 .img2,
        section .ul2 li .b6 .img2,
        section .ul2 li .b8 .img2,
        section .ul2 li .b10 .img2 {
            position: absolute;
            right: 0;
            top: -5px;
            width: 21px;
            height: 21px;
            margin: 0;
            padding: 0;
            z-index: 1;
        }

        .b2 .span1,
        .b4 .span1,
        .b6 .span1,
        .b10 .span1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 21px;
            height: 21px;
            border: 1px solid rgba(218, 219, 222, 1);
            border-radius: 50%;
        }

        .b2 .span2,
        .b4 .span2,
        .b6 .span2,
        .b8 .span2,
        .b10 .span2 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -80%);
            width: 4px;
            height: 10px;
            font-size: 14px;
            font-weight: bold;
            color: rgba(44, 44, 47, 1);
        }

        footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 375px;
            height: 45px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 0px 0px rgba(237, 237, 237, 1);
            z-index: 10;
        }

        footer img {
            position: absolute;
            left: 7px;
            bottom: 5px;
            width: 56px;
            height: 56px;
        }

        footer .span-1 {
            position: absolute;
            left: 46px;
            bottom: 42px;
            width: 17px;
            height: 17px;
            background: rgba(241, 145, 73, 1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 11px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        footer .div1 {
            position: absolute;
            left: 138px;
            top: 18px;
            width: 120px;
            height: 20px;
        }

        footer div .span1 {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
        }

        footer div .span2 {
            font-size: 14px;
            font-weight: 400;
            color: #E85B4D;
        }

        footer .div2 {
            position: absolute;
            top: 0;
            right: 0;
            width: 127px;
            height: 45px;
            background: rgba(50, 177, 108, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);

        }


        /* 购物车页面 */
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 375px;
            height: 217px;
            background: rgba(221, 221, 221, 0.8);
            display: block;
            z-index: 20;
        }

        .cart {
            display: block;
        }

        .cart .imgs-1 {
            position: absolute;
            left: 16px;
            top: 147px;
            width: 50px;
            height: 50px;
            z-index: 30;
        }

        .cart .span-1 {
            position: absolute;
            left: 54px;
            top: 146px;
            width: 17px;
            height: 17px;
            background: rgba(241, 145, 73, 1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 11px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        .cart .c {
            position: absolute;
            left: 0;
            top: 217px;
            width: 375px;
            height: 404px;
            padding-bottom: 60px;
            background: rgba(255, 255, 255, 1);
            border-radius: 6px 6px 0px 0px;
            display: flex;
            flex-direction: column;
            z-index: 5;
        }

        .c1 {
            /* position: absolute;
    left: 0;
    top: 0; */
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 375px;
            height: 44px;
        }

        .c1 .c1-imgs1 {
            margin-left: 13px;
            width: 18px;
            height: 18px;
        }

        .c1 .c1-span1 {
            margin-left: 15px;
            width: 25px;
            height: 11px;
            line-height: 11px;
            font-size: 11px;
            font-weight: 500;
            color: rgba(37, 37, 37, 1);
        }

        .c1 .c1-span2 {
            margin-left: 8px;
            width: 70px;
            height: 12px;
            line-height: 12px;
            font-size: 11px;
            font-weight: 400;
            color: rgba(163, 165, 168, 1);
        }

        .c1 .c1-imgs2 {
            margin-left: 140px;
            width: 13px;
            height: 13px;
        }

        .c1 .c1-span3 {
            margin-left: 3px;
            width: 60px;
            height: 11px;
            line-height: 11px;
            font-size: 11px;
            font-weight: 400;
            color: rgba(163, 165, 168, 1);
        }

        .c2,
        .c3,
        .c4,
        .c5 {
            position: relative;
            margin-top: 21px;
            width: 375px;
            height: 69px;
            display: flex;
            flex-direction: row;
        }

        .c2 {
            margin-top: 7px;
        }

        /* 第一列图 */
        .c2-imgs1,
        .c3-imgs1,
        .c4-imgs1,
        .c5-imgs1 {
            margin-left: 13px;
            margin-top: 26px;
            width: 18px;
            height: 18px;
        }

        /* 食品图 */
        .c2-imgs2,
        .c3-imgs2,
        .c4-imgs2,
        .c5-imgs2 {
            margin-left: 17px;
            margin-top: 0px;
            width: 69px;
            height: 69px;
        }

        /* 图右字 */
        .c2-div1,
        .c3-div1,
        .c4-div1,
        .c5-div1 {
            margin-left: 8px;
            margin-top: 4px;
            width: 100px;
            height: 39px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .c2-span1,
        .c3-span1.c4-span1.c5-span1 {
            margin-top: 4px;
            font-size: 14px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
        }

        .c2-span2,
        .c3-span2,
        .c4-span2,
        .c5-span2 {
            margin-top: 14px;
            font-size: 13px;
            font-weight: bold;
            color: rgba(232, 91, 77, 1);
        }

        /* 加减号 */
        .c2-div2,
        .c3-div2,
        .c4-div2,
        .c5-div2 {
            position: absolute;
            left: 294px;
            bottom: 0;
            width: 62px;
            height: 21px;
        }

        .c2-div2-span1,
        .c3-div2-span1,
        .c4-div2-span1,
        .c5-div2-span1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 21px;
            height: 21px;
            border: 1px solid rgba(218, 219, 222, 1);
            border-radius: 50%;
        }

        /* 减号的横 */
        .c2-div2-span2,
        .c3-div2-span2,
        .c4-div2-span2,
        .c5-div2-span2 {
            position: absolute;
            left: 5px;
            top: 10px;
            width: 12px;
            height: 2px;
            background: rgba(176, 176, 176, 1);
            border-radius: 1px;
            z-index: 10;
        }

        .c2-div2-span3,
        .c3-div2-span3,
        .c4-div2-span3,
        .c5-div2-span3 {
            position: absolute;
            left: 28px;
            height: 5px;
            font-size: 14px;
            font-weight: bold;
            color: rgba(44, 44, 47, 1);
            line-height: 20px;
        }

        /* 加号背景 */
        .c2-div2-span4,
        .c3-div2-span4,
        .c4-div2-span4,
        .c5-div2-span4 {
            position: absolute;
            right: 0;
            top: 0;
            width: 21px;
            height: 21px;
            background: rgba(50, 177, 108, 1);
            border-radius: 50%;
        }

        /* 十字的竖 */
        .c2-div2-span5,
        .c3-div2-span5,
        .c4-div2-span5,
        .c5-div2-span5 {
            position: absolute;
            left: 50px;
            bottom: 4px;
            width: 2px;
            height: 12px;
            background: rgba(255, 255, 255, 1);
            border-radius: 1px;
            z-index: 10;
        }

        /* 加号的横 */
        .c2-div2-span6,
        .c3-div2-span6,
        .c4-div2-span6,
        .c5-div2-span6 {
            position: absolute;
            left: 45px;
            top: 10px;
            width: 12px;
            height: 2px;
            background: rgba(255, 255, 255, 1);
            border-radius: 1px;
            z-index: 10;
        }

        .d {
            position: fixed;
            bottom: 0;
            background-color: white;
            width: 375px;
            height: 45px;
            z-index: 20;
        }

        .d-span1 {
            position: absolute;
            left: 10px;
            top: 17px;
            font-size: 14px;
            width: 50px;
            height: 13px;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            line-height: 13px;
        }

        .d-span2 {
            position: absolute;
            left: 50px;
            top: 17px;
            width: 50px;
            height: 13px;
            line-height: 13px;
            font-size: 14px;
            color: #E85B4D;
        }

        .d-span3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 127px;
            height: 45px;
            text-align: center;
            line-height: 45px;
            background: rgba(50, 177, 108, 1);
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }
    </style>
